<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }

        table {
            background-color: #fff;
            margin: auto;
            width: 400px;
            height: 200px;
            margin: auto;
        }

        .title td {
            border-bottom: 2px solid #fff;
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="0" cellspacing="0">
        <tr class="title">
            <td>公告</td>
            <td>规则</td>
            <td>论坛</td>
            <td>安全</td>
            <td>公益</td>
        </tr>
        <tr>
            <td colspan="5">
                <ul>
                    <li><a href="#">阿里苏宁发布”新三体"战路打造未来十年格局</a></li>
                    <li><a href="#">高诚信会员无条件信任200余万广告商品被处罚</a></li>
                </ul>
            </td>
        </tr>
    </table>
</body>
<script>
    let liObj = {
        notice: ['阿里苏宁发布”新三体"战路打造未来十年格局', '高诚信会员无条件信任200余万广告商品被处罚'],
        rule: ['规则--***-第一条news', '规则----****----第二条news'],
        forum: ['论坛-/////--第一条news', '论坛---/////-----第二条news'],
        safe: ['安全-####--第一条news', '安全---########--第二条news'],
        community: ['规则-^_^ ^_^--第一条news', '规则--^_^ ^_^ ^_^ ^_^---第二条news']
    }
    // console.log(liObj.notice[0]);//测试
    let title = document.getElementsByClassName('title')[0];
    let listNav = title.getElementsByTagName('td');
    let ul = document.querySelector('ul');
    let aList = ul.getElementsByTagName('a'); //新闻列表
    for (let i = 0; i < listNav.length; i++) {
        listNav[i].onmouseover = function () {
            this.style.borderBottom = '2px solid red'; //下边框
            this.style.fontWeight = '600'; //字体加粗
            for (let j = 0; j < aList.length; j++) {
                let key = liObjKey(i);
                // console.log(liObj[key]);//测试
                aList[j].innerText = liObj[key][j]; //改变新闻列表的文字
            }
        }
        listNav[i].onmouseleave = function () {
            this.style.borderBottom = '';
            this.style.fontWeight = '';
        }
    }

    //获取新闻对象的key值
    function liObjKey(x) {
        switch (x) {
            case 0:
                return 'notice';
                break;
            case 1:
                return 'rule';
                break;
            case 2:
                return 'forum';
                break;
            case 3:
                return 'safe';
                break;
            case 4:
                return 'community';
                break;
        }
    }
</script>

</html>